<template>
  <div class="echart-main" v-loading="loading">
    <div>
      <div class="heard-title">
        <div class="title-text">
          <el-icon class="icon"><DataAnalysis /></el-icon>营收统计
        </div>
        <div class="time-select">
          <div class="time-box">
            <el-segmented v-model="timeType" :options="options" @change="infoChange" />
            <el-date-picker
              v-if="timeType === 'YEAR'"
              v-model="year"
              type="year"
              format="YYYY"
              value-format="YYYY"
              placeholder="请选择年份"
              @change="infoChange"
              style="width: 180px"
            />
            <div style="display: inline-block">
              <ElQuarter
                v-if="timeType === 'QUARTER'"
                style="width: 180px"
                v-model="quarter"
                @change="infoChange"
              />
            </div>
            <el-date-picker
              v-if="timeType === 'MONTH'"
              v-model="month"
              type="month"
              placeholder="请选择月份"
              format="YYYY/MM"
              value-format="YYYY-MM"
              @change="infoChange"
              style="width: 180px"
            />
          </div>
        </div>
      </div>
      <el-divider style="margin: 0 0 10px 0" />
    </div>
    <div class="main-content">
      <div class="left">
        <div class="data-info" v-for="item in dataList" :key="item.name">
          <div class="data-label">{{ item.name }} </div>
          <div class="data-number">
            <svg-icon icon-class="money-menu-act" class="icons" />
            <count-to
              :start-val="0"
              :end-val="item.value"
              :duration="2000"
              :decimals="2"
              :autoplay="true"
            ></count-to>
          </div>
        </div>
        <div></div>
      </div>
      <div class="right">
        <MyEcharts :option="pieChartOption" :height="420"></MyEcharts>
      </div>
    </div>
    <el-divider style="margin: 12px 0" />
    <div>
      <div class="heard-title">
        <div class="title-text">
          <el-icon class="icon"><DataLine /></el-icon>{{ getDataType(dataType) }}
        </div>
        <div class="time-select">
          <div class="time-box">
            <el-segmented v-model="dataType" :options="dataOptions" @change="infoChange" />
          </div>
        </div>
      </div>
      <div class="echart">
        <MyEcharts :option="lineChartOption"></MyEcharts>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { ref, onMounted } from 'vue'
  import ElQuarter from '@/components/QuarterSelect/index.vue'
  import CountTo from '@/components/CountTo/index.vue'
  import MyEcharts from '@/components/myEcharts/index.vue'
  import {
    getDashboardTime,
    postDashboardPieChartByType,
    postDashboardLinePieByTimeByType,
  } from '@/api/controller/charging-controller'
  const loading = ref(true)
  const timeType = ref('YEAR')
  const options = [
    { label: '年', value: 'YEAR' },
    { label: '季度', value: 'QUARTER' },
    { label: '月', value: 'MONTH' },
  ]
  const quarterList = ref(['第一季度', '第二季度', '第三季度', '第四季度'])
  const dataType = ref('orders')
  const dataOptions = [
    { label: '充电订单', value: 'orders' },
    { label: '流水金额', value: 'income' },
    { label: '耗电量', value: 'electricity' },
  ]
  const year = ref()
  const month = ref()
  const quarter = ref()
  const dataList = ref([])
  const basePieChartOption = {
    title: {
      text: '总收入分配图',
      left: 'center',
    },
    tooltip: {
      trigger: 'item',
    },
    legend: {
      orient: 'vertical',
      left: '8%',
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true,
    },
    series: [
      {
        type: 'pie',
        radius: '50%',
        data: [],
        label: {
          normal: {
            show: true,
            formatter: '{b}: \n{d}%',
          },
        },
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)',
          },
        },
      },
    ],
  }
  const baseLineChartOption = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        label: {
          backgroundColor: '#6a7985',
        },
      },
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true,
    },
    xAxis: [
      {
        type: 'category',
        boundaryGap: false,
        data: [],
      },
    ],
    yAxis: [
      {
        type: 'value',
      },
    ],
    series: [
      {
        name: '',
        type: 'line',
        stack: 'Total',
        areaStyle: {},
        emphasis: {
          focus: 'series',
        },
        data: [],
      },
    ],
  }
  const pieChartOption = ref()
  const lineChartOption = ref()
  onMounted(async () => {
    let res = await getDashboardTime()
    year.value = res.data.year + ''
    month.value = `${res.data.year}-${res.data.month < 10 ? '0' + res.data.month : res.data.month}`
    quarter.value = res.data.year + '年' + quarterList.value[res.data.quarter - 1]
    infoChange()
  })
  const infoChange = async () => {
    try {
      loading.value = true
      if (timeType.value === 'QUARTER') {
        year.value = quarter.value.split('年')[0]
      }
      if (timeType.value === 'MONTH') {
        year.value = month.value.split('-')[0]
      }
      await Promise.all([
        postDashboardPieChartByType(
          { type: timeType.value },
          {
            year: year.value * 1,
            quarter: getQuarter(quarter.value),
            month: month.value.split('-')[1] * 1,
          },
        ).then((res) => {
          dataList.value = res.data
          pieChartOption.value = JSON.parse(JSON.stringify(basePieChartOption))
          pieChartOption.value.series[0].data = [
            { value: res.data[1].value, name: '电费' },
            { value: res.data[3].value, name: '分出利润' },
            { value: res.data[4].value, name: '净利润' },
          ]
        }),
        postDashboardLinePieByTimeByType(
          { type: dataType.value, time: timeType.value },
          {
            year: year.value * 1,
            quarter: getQuarter(quarter.value),
            month: month.value.split('-')[1] * 1,
          },
        ).then((res) => {
          lineChartOption.value = JSON.parse(JSON.stringify(baseLineChartOption))
          lineChartOption.value.series[0].name = getDataType(dataType.value)
          for (let i = 0; i < res.data.length; i++) {
            lineChartOption.value.series[0].data.push(res.data[i].value ? res.data[i].value : 0)
            lineChartOption.value.xAxis[0].data.push(res.data[i].label)
          }
        }),
      ])
    } finally {
      loading.value = false
    }
  }

  const getQuarter = (quarter) => {
    for (let i = 0; i < quarterList.value.length; i++) {
      if (quarter.indexOf(quarterList.value[i]) !== -1) {
        return i + 1
      }
    }
  }
  const getDataType = (type) => {
    for (let i = 0; i < dataOptions.length; i++) {
      if (dataOptions[i].value === type) {
        return dataOptions[i].label
      }
    }
  }
</script>

<style lang="scss" scoped>
  .echart-main {
    background-color: white;
    border: soild 1px #dcdfe6;
    box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.12);
    border-radius: 8px;
    margin-right: 16px;
    .heard-title {
      margin: 6px 14px 6px 26px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .title-text {
        font-weight: bold;
        display: flex;
        align-items: center;
        .icon {
          margin-right: 8px;
        }
      }
      .time-box {
        display: flex;
        align-items: center;
      }
    }
    .main-content {
      display: flex;
      margin: 16px 30px;
      .left {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        width: 32%;
        .data-info {
          .data-label {
            font-size: 18px;
            color: rgb(115, 127, 145);
            margin-bottom: 10px;
          }
          .data-number {
            font-size: 26px;
            color: #409eff;
            .icons {
              margin-right: 6px;
              width: 20px;
              height: 20px;
            }
          }
        }
      }
      .right {
        margin-left: 10%;
        width: 66%;
        height: 420px;
      }
    }
    .echart {
      margin: 16px 30px;
      height: 300px;
    }
  }
</style>
